<script setup>
    import dayjs from 'dayjs'
    import { ref, reactive } from 'vue'
    import Type from '@components/search/type'
    import Search from '@components/search/index'
    import PageWrapper from '@components/PageWrapper.vue'
    import { common, service } from '@utils'
    import TitleValue from '@components/TitleValue'
    import { useRoute } from 'vue-router'
    import { View } from '@element-plus/icons-vue'
    import { usePremission } from '@hooks'
    import Detail from './Detail'

    const data = ref()

    const route = useRoute()

    const premission = usePremission({
        view: 'bfqz:order:view'
    })

    let queryForm = reactive({
        time: [],
        orderStatus: ''
    })
    let end = new Date().getTime()
    let start = new Date().getTime() - 3600 * 1000 * 24 * 6
    end = dayjs(end).format('YYYY-MM-DD 23:59:59')
    start = dayjs(start).format('YYYY-MM-DD 00:00:00')
    queryForm.time = [start, end]
    const searchs = ref([
        {
            type: Type.DATE_RANGE,
            width: 8,
            key: 'time',
            default: queryForm.time
        },
        {
            type: Type.INPUT,
            key: 'name',
            width: 5,
            placeholder: '商户名'
        },
        // {
        //     type: Type.SELECT,
        //     key: 'state',
        //     width: 5,
        //     placeholder: '订单类别',
        //     valueKey: 'val',
        //     data: []
        // },
        {
            type: Type.SELECT,
            key: 'orderStatus',
            width: 5,
            placeholder: '订单状态',
            valueKey: 'val',
            data: queryForm.orderStatus,
            default: queryForm.orderStatus
        },
        {
            width: 6,
            type: Type.SEARCH_BUTTON
        }
    ])

    const pageRef = ref()
    const tableRef = ref()
    const detailRef = ref()
    const riskRef = ref()

    const expressMethods = ref()
    const expressCompanys = ref()
    // const orderType = ref()
    const yesNo = ref()
    const sonStatuss = ref()

    const numLine = ref(1)
    const onLineNum = (num) => {
        numLine.value = num
    }
    const onSearch = (param) => {
        queryForm = param
        pageRef.value.refresh()
    }

    const getData = async ({ pageNum, pageSize }, cb) => {
        const query = { ...queryForm }
        if (query.time && query.time.length > 0) {
            query.rentStartTime = query.time[0]
            query.rentEndTime = query.time[1]
            // query.orderStatus = ""
            delete query.time
        }
        const dataRes = await service.statics.consume(query)
        data.value = dataRes
        const res = await service.statics.member(pageNum, pageSize, query)
        cb(res)
        setTimeout(() => {
            tableRef.value.scrollTo(0, 0)
        }, 0)
    }

    const getStatuss = async () => {
        const res = await service.sys.dictionaryAll()
        if (res) {
            let statuss = null
            let edpService = null
            for (let i = 0; i < res.length; i++) {
                if (res[i].code === 'stateStatement') {
                    statuss = res[i].list
                } else if (res[i].code === 'sonOrderState') {
                    sonStatuss.value = res[i].list
                } else if (res[i].code === 'fastMail') {
                    expressMethods.value = res[i].list
                } else if (res[i].code === 'fastMailCompany') {
                    expressCompanys.value = res[i].list
                } else if (res[i].code === 'yesNo') {
                    res[i].list.forEach((item) => {
                        item.val === 'true' && (item.val = true)
                        item.val === 'false' && (item.val = false)
                    })
                    yesNo.value = res[i].list
                } else if (res[i].code === 'edp-service') {
                    edpService = res[i].list
                }else if(res[i].code === 'orderType'){
                }
            }
            // searchs.value[3].data = statuss
            searchs.value[2].data = statuss
            // searchs.value[2].data = orderType
        }
    }

    const getDataStatements = async (query) => {
    }

    getStatuss()

    const width = (function (premission) {
        let width = 24
        premission.view && (width += 33 * 2)
        return Math.max(width, 72)
    })(premission)
</script>
<template>
    <section class="main-white">
        <search :items="searchs" @filter="onSearch" @onLineNum="onLineNum" :on-load="true" />
        <div class="main-all" v-if="data">
            <div class="main-all-item">
                <title-value title="客户数量: " :value="data.countMember" />
                <title-value title="下单数量: " :value="data.countOrder" />
                <title-value title="设备已发货数量: " :value="data.countDeviceOut" />
            </div>
            <div class="main-all-item">
                <title-value title="首期押金支付成功数量: " :value="data.countFirstPayedDeposit" />
                <title-value title="首期金额: " :value="data.firstPayed" />
                <title-value title="首期设备总签约价值: " :value="data.marketPriceAll" />
            </div>
            <div class="main-all-item">
                <title-value title="逾期客户数量: " :value="data.countOverMember" />
                <title-value title="逾期笔数: " :value="data.countOverOrder" />
                <title-value title="逾期总金额: " :value="data.overTotalPrice" />
                <!-- <title-value title="坏账笔数: " :value="data.countDeadOrder" />
                <title-value title="坏账客户数量: " :value="data.countDeadMember" />
                <title-value title="坏账总金额: " :value="data.deadTotalPrice" /> -->
            </div>
            <div class="main-all-item">
                <title-value title="进行中的订单数: " :value="data.inUseOrderCount" />
                <title-value title="进行中的总金额: " :value="data.inUseOrderPriceSum" />
                <title-value title="代发货的订单数: " :value="data.waitSendOrderCount" />
                <title-value title="代发货的总金额: " :value="data.waitSendOrderPriceSum" />
            </div>
        </div>
        <div  class="main-all" v-if="data">
            <el-table :data="data.finishOrderCountList" border show-summary style="width: 440px;" >
                <el-table-column prop="rentDays" label="已完成全部/天数" />
                <el-table-column prop="count" sortable label="订单数量" />
                <el-table-column prop="moneySum" sortable label="订单总金额" />
            </el-table>
            <el-table :data="data.oneFinishOrderCountList" border show-summary style="width: 440px;">
                <el-table-column prop="rentDays" label="已完成单期/天数" />
                <el-table-column prop="count" sortable label="订单数量" />
                <el-table-column prop="moneySum" sortable label="订单总金额" />
            </el-table>
            <el-table :data="data.duoFinishOrderCountList" border show-summary style="width: 440px;">
                <el-table-column prop="rentDays" label="已完成多期/天数" />
                <el-table-column prop="count" sortable label="订单数量" />
                <el-table-column prop="moneySum" sortable label="订单总金额" />
            </el-table>
        </div>
        <page-wrapper @get-data="getData" ref="pageRef" :on-load="false">
            <template v-slot:default="props">
                <vxe-table
                    ref="tableRef"
                    :loading="false"
                    :data="props.tableData.records"
                    :max-height="common.tableHeight(true, numLine, 147)"
                    highlight-hover-row
                    round
                    stripe
                    border
                >
                    <vxe-column type="seq" width="50" fixed="left"></vxe-column>
                    <vxe-column field="id" title="订单ID" width="150" fixed="left" />
                    <vxe-column field="userId" title="用户ID" width="150" />
                    <vxe-column field="userName" title="姓名" width="70" />
                    <!-- <vxe-column field="yidunFraction" title="蚁盾分" width="80" /> -->
                    <vxe-column field="deposit" title="押金(元)" width="80" />
                    <vxe-column field="freeDeposit" title="免押额度(元)" width="100" />
                    <vxe-column field="pay" title="已支付金额(元)" width="110" />
                    <vxe-column
                        field="goodsContent"
                        title="产品"
                        show-overflow="tooltip"
                        width="160"
                    />
                    <!-- <vxe-column field="state" title="订单状态" width="80" /> -->
                    <vxe-column title="订单状态" width="150">
                        <template #default="{ row }">
                            <el-tag>
                                {{
                                    common.getValueByKey('val', row.state, searchs[2].data, 'label')
                                }}
                            </el-tag>
                        </template>
                    </vxe-column>
                    <!-- <vxe-column field="overduePrice" title="交易状态" width="80" /> -->
                    <vxe-column field="createDate" title="订单创建时间" width="130" />
                    <vxe-column field="alipayDate" title="订单支付完成时间" width="130" />
                    <vxe-column field="rentStartTime" title="订单记期开始时间" width="130" />
                    <vxe-column field="rentEndTime" title="订单记期结束时间" width="130" />
                    <vxe-column field="overDate" title="逾期日期" width="120" />
                    <vxe-column field="overDay" title="逾期天数" width="100" />
                    <vxe-column field="overDuePrice" title="逾期滞纳金(元)" width="100" />
                    <!-- <vxe-column field="createDate" title="坏账日期" width="100" />
                    <vxe-column field="createDate" title="坏账天数" width="100" />
                    <vxe-column field="createDate" title="坏账滞纳金" width="100" /> -->
                    <vxe-column field="goodsName" title="商户名称" width="100" />
                    <vxe-column field="goodsId" title="商户ID" width="100" />
                    <!-- <vxe-column title="操作" width="50" fixed="right">
                        <template #default="{ row }">
                            <section class="flex-align flex-wrap">
                                <el-tooltip
                                    v-if="premission.view"
                                    effect="dark"
                                    content="详情"
                                    placement="top"
                                    :enterable="false"
                                >
                                    <el-button
                                        type="primary"
                                        circle
                                        plain
                                        :icon="View"
                                        size="small"
                                        @click="detailRef.open(row)"
                                    ></el-button>
                                </el-tooltip>
                            </section>
                        </template>
                    </vxe-column> -->
                </vxe-table>
            </template>
        </page-wrapper>
        <detail
            ref="detailRef"
            :statuss="searchs[3].data"
            :sonStatuss="sonStatuss"
            :yesNo="yesNo"
            :expressMethods="expressMethods"
            :expressCompanys="expressCompanys"
            :orderType="searchs[2].data"
        />
    </section>
</template>
<style lang="scss" scoped>
    :deep(.el-button + .el-button) {
        margin-left: 10px;
    }
    .main-white {
        background: #f1f3f6;
    }
    .main-all {
        display: flex;
        justify-content: space-between;
        background: #f5f5f5;
        background: #f1f3f6;
        margin-bottom: 20px;
        .main-all-item {
            background: #ffffff;
            width: 300px;
            height: 200px;
            border-radius: 8px;
            display: inline-flex;
            flex-direction: column;
            align-items: left;
            justify-content: center;
            padding-left: 40px;
        }
    }
</style>
